import React, { useState, useEffect } from 'react';
import { for_obj, d_sort, PanelBt, NuiBt, obj_str, is_empty } from 'sui';
import { split_psn, get_rgb, load_pos } from './cmd';

const PsnView = ({ hreturn, box, data, title, high, cl }) => {
    const [main, setMain] = useState();
    const [select, setSelect] = useState("out");
    const [main_pos, mainPos] = useState();

    useEffect(() => {
        setMain(data.box);
        load_pos(obj_str(data, "sn"), mainPos);
    }, [data]);

    useEffect(() => {
        if (!main_pos || is_empty(data.box)) {
            return;
        }

        const ret = [];

        data.box.forEach(d => {
            if (main_pos) {
                const f = main_pos[obj_str(d, "sn")];
                d["pos"] = obj_str(f, "pos");
            }

            if (box) {
                const box_in = box[obj_str(d, "boxin")];
                if (box_in) {
                    const f = box_in[obj_str(d, "insn")];
                    d["inpos"] = obj_str(f, "pos");
                }
            }

            ret.push(d);
        });

        d_sort(ret, "pos", true);

        ret.forEach((d, i) => d["pair"] = i + 1);

        setMain(ret);
    }, [data, main_pos, box]);

    const getTitle = () => {
        const sn = obj_str(data, "sn");
        const cl = get_rgb(sn);

        return (
            <div className="ml-4 text-3xl rounded-lg px-4" style={{ background: `rgb(${cl[0]}, ${cl[1]}, ${cl[2]})`, color: `${cl[3]}` }}>
                {title}<span className="ml-4">{sn}</span>
            </div>
        );
    };

    const head_st = "py-1 table-cell px-12 ";
    const cell_st = "py-1 table-cell px-12 ";

    const OutOrder = () => {
        if (select === "in") {
            return null;
        }

        const getItem = () => {
            if (is_empty(main)) {
                return null;
            }

            return main.map(d => {
                const pos = obj_str(d, "pos");
                const inpos = obj_str(d, "inpos");
                const pair = obj_str(d, "pair");

                const sn = split_psn(obj_str(d, "sn"));
                const insn = split_psn(obj_str(d, "insn"));

                const boxin = obj_str(d, "boxin")
                const cl = get_rgb(boxin);

                return (
                    <div className="table-row" key={sn}>
                        <div className={cell_st + "text-green-300"}>{pos}</div>
                        <div className={cell_st + "text-green-300"}>{sn}</div>
                        <div className={cell_st + "text-green-300"}>{pair}</div>
                        <div className={cell_st + "px-20"}>
                            <span className="px-4 rounded-sm" style={{ background: `rgb(${cl[0]}, ${cl[1]}, ${cl[2]})`, color: `${cl[3]}` }}>{boxin}</span>
                        </div>
                        <div className={cell_st + "text-orange-300"}>{inpos}</div>
                        <div className={cell_st + "text-orange-300"}>{insn}</div>
                        <div className={cell_st + "text-orange-300"}>{pair}</div>
                    </div>
                );
            });
        };


        return (
            <div className="table text-white text-3xl font-bold ml-4">
                <div className="table-row">
                    <div className={head_st}>外圈位置</div>
                    <div className={head_st}>外圈编号</div>
                    <div className={head_st}>配对号</div>
                    <div className={head_st + "px-20"}>内圈箱号</div>
                    <div className={head_st}>内圈位置</div>
                    <div className={head_st}>内圈编号</div>
                    <div className={head_st}>配对号</div>
                </div>
                {getItem()}
            </div>
        );
    };

    const InOrder = () => {
        if (select === "out") {
            return null;
        }

        const getItem = () => {
            if (is_empty(main)) {
                return null;
            }

            const box_set = {};

            main.forEach(d => {
                const boxin = obj_str(d, "boxin")

                if (box_set[boxin]) {
                    box_set[boxin].push(d);
                } else {
                    box_set[boxin] = [d];
                }
            });

            const ret = [];

            for_obj(box_set, (k, v) => {
                d_sort(v, "inpos", true);
                ret.push({ sn: k, v: v });
            });

            d_sort(ret, "sn");

            return ret.map(val => {
                const boxin = obj_str(val, "sn")
                const cl = get_rgb(boxin);

                const item = val.v.map(d => {
                    const pos = obj_str(d, "pos");
                    const inpos = obj_str(d, "inpos");
                    const pair = obj_str(d, "pair");

                    const sn = split_psn(obj_str(d, "sn"));
                    const insn = split_psn(obj_str(d, "insn"));

                    return (
                        <div className="table-row" key={sn}>
                            <div className={cell_st + "text-orange-300"}>{inpos}</div>
                            <div className={cell_st + "text-orange-300"}>{insn}</div>
                            <div className={cell_st + "text-orange-300"}>{pair}</div>
                            <div className={cell_st + "text-green-300"}>{pos}</div>
                            <div className={cell_st + "text-green-300"}>{sn}</div>
                            <div className={cell_st + "text-green-300"}>{pair}</div>
                        </div>
                    );
                });

                return (
                    <div className="flex flex-col">
                        <div className="mx-4 my-3 text-3xl rounded-lg px-4" style={{ background: `rgb(${cl[0]}, ${cl[1]}, ${cl[2]})`, color: `${cl[3]}` }}>
                            内圈箱号<span className="ml-4">{boxin}</span>
                        </div>
                        <div className="table text-white text-3xl font-bold ml-4">
                            <div className="table-row">
                                <div className={head_st}>内圈位置</div>
                                <div className={head_st}>内圈编号</div>
                                <div className={head_st}>配对号</div>
                                <div className={head_st}>外圈位置</div>
                                <div className={head_st}>外圈编号</div>
                                <div className={head_st}>配对号</div>
                            </div>
                            {item}
                        </div>
                    </div>
                );
            });
        };

        return (
            <div className="flex flex-col">
                {getItem()}
            </div>
        );
    };

    const is_select = (v) => v === select;

    return (
        <div className="w-full flex flex-col">
            <div className="mt-2 inline-flex justify-between items-center">
                {getTitle()}
                <div className="inline-flex items-center">
                    <PanelBt select={is_select("out")} hcmd={() => setSelect("out")}>外圈顺序</PanelBt>
                    <PanelBt select={is_select("in")} hcmd={() => setSelect("in")} className="ml-4 mr-8">内圈顺序</PanelBt>
                    <NuiBt className="h-16 mr-8" hcmd={hreturn}>返回</NuiBt>
                </div>
            </div>
            <div style={{ height: `${high - 255}px`, width: "100%" }} className="mx-2 my-4 overflow-y-auto">
                <OutOrder/>
                <InOrder/>
            </div>
        </div>
    );
};

export {PsnView};
